<template>
    <div class="manage-home">
        <el-container class="cantainer-box">
            <el-header style="background: #C0C4CC;">
                <div class="costom-header-box">
                    <div @click="openOrCloseMenu">
                        <!-- <el-icon ><ArrowRightBold /></el-icon> -->
                        <el-icon style="cursor: pointer"><Grid /></el-icon>
                    </div>
                    <div>后台管理系统</div>
                    <div>
                        <el-icon ref="buttonRef" @click="myselfLink"><UserFilled /></el-icon>
                    </div>
                </div>
                <el-popover  ref="popoverRef"  :virtual-ref="buttonRef"
                    trigger="click" virtual-triggering :popper-style="{width:'120px',minWidth:'120px'}">
                    <div class="myself-box" @click="logout">
                        <div>
                            <el-icon><SwitchButton /></el-icon>
                        </div>
                        <div>退出</div>
                    </div>
                </el-popover>
            </el-header>
            <el-container>
                <el-aside :width="leftMenuData.width" >
                    <LeftMenu @chilkMenuLink="goRouterLink"></LeftMenu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup name="ManagerHome">

import LeftMenu from '@/components/menu/LeftMenu.vue';
import {useRouter,RouterView} from 'vue-router';
import { ref,reactive, unref } from 'vue';
import { logoutApi } from '@/http/api/login/login';

const router  = useRouter();
const buttonRef = ref()
const popoverRef = ref()


const goRouterLink = (link:string) => {
    console.log(link);
    router.push(link);
}

const leftMenuData = reactive({
    width:"200px"
});


function openOrCloseMenu() {
    if(leftMenuData.width == "200px") {
        leftMenuData.width = "0px";
    } else {
        leftMenuData.width = "200px";
    }
    
}

function myselfLink() {
    unref(popoverRef).popperRef?.delayHide?.();
}

function logout() {
    logoutApi().then((res)=>{
        if(res.code != 200) return;
        localStorage.removeItem("token");
        window.location.href = '/manage/login'
    })
}

</script>
